<!--
 * @Date: 2020-07-10 17:56:21
 * @LastEditors: leehave
 * @LastEditTime: 2020-07-10 18:18:44
--> 
<template>
  <div class="notice-content" :class="`notice-${type}`">
    <div class="icon">
      <van-icon :name="type" :color="color" size="24"/>
    </div>
    <div class="right-text">
      <div class="title">{{title}}</div>
      <div class="description">{{desc}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "noticePanel",
  props: {
    type:{
      type: String,
      default: 'info'
    },
    title:{
      type: String,
      default: '标题'
    },
    desc: {
      type: String,
      default: '描述'
    }
  },
  data() {
    return {};
  },
  computed: {
    color(){
      switch (this.type) {
        case 'info':
          return '#909399'
          break;
        case 'success':
          return '#67c23a'
          break;
        case 'warning':
          return '#e6a23c'
          break;
        case 'error':
          return '#f56c6c'
          break;
        default:
          break;
      }
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style lang="less">
.notice-content{
  width: 100%;
  padding: 8px 16px;
  margin: 15px 0 0 0;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity .2s;
  &.notice-info{
    background-color: #f4f4f5;
    color: #909399;
  }
  &.notice-success{
    background-color: #f0f9eb;
    color: #67c23a;
  }
  &.notice-warning{
    background-color: #fdf6ec;
    color: #e6a23c;
  }
  &.notice-error{
    background-color: #fef0f0;
    color: #f56c6c;
  }
  .right-text{
    display: table-cell;
    padding: 0 8px;
    .title{
      font-size: 14px;
      margin-bottom: 5px;
    }
    .description{
      font-size: 12px;
      line-height: 1.5;
    }
  }
}
</style>
